'use strict';

import React, {PropTypes, Component } from 'react';

import { btnStatusMap } from '../constants/statusMap';
import classNames from '../utils/classNames';

import YmtApi from 'YmtApi';

//Group status look: 
//http://wiki.ymatou.cn:8090/pages/viewpage.action?pageId=17400433

let _getTime =  function(time){
	let     _s = 1E3,
            _m = _s * 60,
            _h = _m * 60;
	let _=['00','01','02','03','04','05','06','07','08','09'],  //补零
		//t = new Date(date) - new Date(),
		h = Math.floor(time / _m / 60 % 24),
		m = Math.floor(time / _m % 60),
		s = Math.floor(time / _s % 60);
	if(time < 0){
		return '00:00:00';
	}
	return [_[h]||h,_[m]||m,_[s]||s].join(":");
};
class ToolsBar extends Component {
	constructor(props) {
	    super(props);
	    this.state = {
	    	downCount:_getTime(),
	    	isInvalid:false
	    }
	}
	componentWillUnmount(){
		//删除定时器
		clearInterval(this.timer);
	}
	componentDidMount(){
	}
	//在该函数中调用 this.setState() 将不会引起第二次渲染。
	componentWillReceiveProps(nextProps){
		let { status,groupInfo,updateStatusFn,isHistory = false } = nextProps;
		//status = 16
		if(    status === 1
			|| status === 5
			|| status === 6
			|| status === 7
			|| status === 8
			|| status === 9
			|| ( status === 10 && (isHistory || YmtApi.isWechat))
			|| status === 11
			|| status === 12){

			let remainTime = {
				6:groupInfo.JoinGroupLastExpiresIn,
				7:groupInfo.OrderLastTimeExpiresIn,
				8:groupInfo.PayLastTimeExpiresIn
			}[status] || 0;

			if(status === 10 || status === 11 || status === 12){
				this.setState({
					isInvalid:true
				})
			}

			clearInterval(this.timer);

			if(remainTime < 1 ){
				this.setState({
					isInvalid:true
				});
			}else{
				
				this.setState({
					time:_getTime(remainTime)
				});
				this.timer = setInterval(function(){
					remainTime -= 1E3;
					this.setState({time:_getTime(remainTime)});
					if( remainTime < 1){
						this.setState({
							isInvalid:true
						});
						clearInterval(this.timer);
						updateStatusFn && updateStatusFn();
					}
				}.bind(this),1000);
			}
			
		}
	}
	render() {
		let { 
			status,
			onCreateGroupHandler,
			onShareHandler,
			onJoinGroupHandler,
			groupInfo,
			onPayHandler,
			onBuyNow,
			productInfo,
			createGroupCount,
			joinGroupCount,
			isHistory = false } = this.props;
		//status = 16;
		let buttonsWrapper = (()=>{
			let statusTxt = btnStatusMap[status];
			if( status === 0 || status === 10 && !isHistory && !YmtApi.isWechat ){
				if(YmtApi.isWechat){
					return (
						<div className="tools-bar">
							<button className={classNames("btn btn-primary btn-full",{invalid:!(createGroupCount>0)})}
									data-role="button"
									onClick={ ()=>{
										window.location.href='http://download.app.ymatou.com/index.aspx?from=inapp25';
									} }>下载APP去开团</button>
						</div>
					)
				}else{
					return (
						<div className="tools-bar">
							<button className={classNames("btn btn-primary btn-full",{invalid:!(createGroupCount>0)})}
									data-role="button"
									onClick={ ()=>{
										if(createGroupCount>0){
											onCreateGroupHandler()
										}
									} }>{createGroupCount>0?'我要开团':'开团次数已用完'}</button>
						</div>
					)
				}
				
			}else if(
				status === 5
				|| status === 6
				|| status === 7
				|| status === 8
				|| (status === 10 && (isHistory || YmtApi.isWechat))
				|| status === 11
				|| status === 12){

				let remainTime;

				let buttons = (()=>{
					if(status === 6){
						if(groupInfo.IsInCurrentTuan){
							return <button className={classNames("btn btn-primary btn-full btn-abs btn-lg" ,{invalid:this.state.isInvalid})}
									data-role="button"
									onClick={ ()=>{
										if(this.state.isInvalid){
											return;
										}
										onShareHandler()
									} }>呼朋唤友来参团</button>
						}else{
							return <button className={classNames("btn btn-primary btn-full btn-abs btn-lg") }
									data-role="button"
									onClick={ ()=>{
										onJoinGroupHandler()
									} }>我要参团</button>
						}
						
					}else if(status === 7){
						return <button className={classNames("btn btn-primary btn-full btn-abs btn-lg",{invalid:this.state.isInvalid})}
								data-role="button"
								onClick={ ()=>{
									if(this.state.isInvalid){
										return;
									}
									onBuyNow({
										SellerId:productInfo.SellerId,
										SellerName:productInfo.SellerName,
										CatalogId:productInfo.CatalogId,
										ProductNumber:1,
										ThirdId:groupInfo.ThirdId
									});
								} }>组团成功！立即购买</button>
					}else if(status === 8){
						return <button className={classNames("btn btn-primary btn-full btn-abs btn-lg" ,{invalid:this.state.isInvalid})}
								data-role="button"
								onClick={ ()=>{
									if(this.state.isInvalid){
										return;
									}
									onPayHandler(groupInfo);
								} }>立即支付</button>
					}else{
						return <button className="btn btn-primary btn-full btn-abs btn-lg invalid"
								data-role="button">{btnStatusMap[status]}</button>
					}
				})();

				let downCountTxt = '距本团关闭还剩';

				if(status === 7){
					downCountTxt = '可购买时间还剩'
				}else if(status === 8){
					downCountTxt = '可支付时间还剩'
				}else if(status === 10){
					downCountTxt = '本团已过期啦~'
				}else if(status === 11){
					downCountTxt = '过时不能下单啦~'
				}else if(status === 12){
					downCountTxt = '过时不能支付啦~'
				}

				return (
					<div className="tools-bar">
						<div className="tools-bar-inner">
							<div className={ classNames("downcount-wrapper",{invalid:this.state.isInvalid}) }> 
								{downCountTxt}<br/>
								{this.state.time}
							</div>
							{ buttons }
						</div>
					</div>
				)
			}else if(status === 9){
				return (
					<div className="tools-bar">
						<div className="tools-bar-inner">
							<div className="downcount-wrapper sccuess"> 
								<strong>哈哈，好货收入囊中了!</strong>
							</div>
							 <button className="btn btn-primary btn-full btn-abs btn-lx"
										data-role="button"
									 onClick={
									 	()=>{
									 		YmtApi.open({
									 			url:'/list.html',
									 			title:'砍价团列表'
									 		})
									 	}
									 }>逛逛其他团</button>
						</div>
					</div>
				)
			}else{
				return (
					<div className="tools-bar">
						<div className="tools-bar-inner">
							<button className="btn btn-primary btn-full invalid" 
							        data-role="button">{status === 1?
							        ((groupInfo.BeginTime||'')
							        .replace(/\d{4}-/,'')
							        .replace('-','月')
							        .replace(' ','日 ')
							        .replace(/:\d{2}$/,'')+' 即将开始'):btnStatusMap[status]}</button>
				        </div>
					</div>						
				)
			}
		})()

		return ( 
			<div className="tools-bar-wrapper">
				{buttonsWrapper}
			</div>
		)
	}
}

export default ToolsBar